<template>
  <div class="topnav-content">
    <Input search v-model="srhValue" @on-search="search" placeholder="搜索关键词..." />
    <Tree :data="deviceData"
          :render="renderContent"
          :load-data="loadData"
          :select-node="selectNode"
          @on-select-change="changeNode"  expand-node>

<!--      :render="renderContent"
      :select-node="selectNode"
      @on-select-change="changeNode" expand-node ></Tree>-->

    </Tree>
  </div>
</template>
<script>
import Device from '@/api/Device';
import {apiResult} from "@/libs/util";
export default {
  name:"DeviceTree",
  components: {},
  data(){
    return{
      //loading:false,
      api: new Device(),
      srhValue: null,
      deviceData: [],
      buttonProps: {
        type: 'primary',
        size: 'small',
      },
      selectNode: false
    }
  },
  methods:{
    loadData(item, callback){
      //getData(item);

      console.log("item: %o",item);
      let param=null;
      if (!!item){
        param = {id:item};
      }

      api.findDeviceForOrgTree(param).then(res=>{
        //console.log("res: %o",res.data);
          apiResult(res.data,false,result=>{
            callback(result.data);
          })
      });
    },
    getData(item){
      console.log("item: %o",item);
      let param=null;
      if (!!item){
        param = {id:item};
      }

      api.findDeviceForOrgTree(param).then(res=>{
        //console.log("res: %o",res.data);
          apiResult(res.data,false,result=>{
            this.deviceData =result.data;
          })
      });
    },
    search(){ },
    changeNode(nodes,node){
      /** 这个方法没起作用了*/
      this.$emit('on-select-change', node, node);
    },
    /** Render 渲染 */
    renderContent(h, { root, node, data }){
      if (data.type == 'org'){
        /** 机构: 大字体
         *
         <span style="display: 'inline-block',width: '100%'">
           <span>
              <h1 style="color:black">这是总公司</h1>
           </span>
         </span>
         *
         * */
        return h('span', {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        }, [
          h('span', [
            h('h3',{style: {color:"black"}},data.title)
          ])
        ]);
      }
      else if (data.type == 'dev' && '1' == data.online){
        /** 在线设备 绿色字体 */
        return h('span', {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        }, [
          h('span', [
            h('span', {style: {color:"green"}},data.title)
          ]),
          h('span', {
            style: {
              display: 'inline-block',
              float: 'right',
              marginRight: '2px'
            }
          }, [
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'logo-youtube',
                title: '视频监控'
              }),
              style: {marginRight: '8px'},
              on: {
                click: () => {
                  this.$emit('on-playbtnclick', node, data)
                }
              }
            })
          ])
        ]);
      }else{
        return h('span', {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        }, [
          h('span', [
            h('span', {style: {color:"black"}}, data.title)
          ])
        ]);
      }
    },
  },
  mounted() {
    //this.search();
    this.getData();
  }
}

</script>
<style lang="less">
@import "./topnav";
</style>
